<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入css文件 -->
    <link href="./quill.snow.css" rel="stylesheet" />

    <link href="./quill.core.css" rel="stylesheet" />
    <link href="./quill.bubble.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/a11y-light.min.css" rel="stylesheet" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js" integrity="sha512-tHQeqtcNWlZtEh8As/4MmZ5qpy0wj04svWFK7MIzLmUVIzaHXS8eod9OmHxyBL1UET5Rchvw7Ih4ZDv5JojZww==" crossorigin="anonymous"></script>
    <style>
      #editor {
        height: 430px;
      }
    </style>
  </head>
  <body>
    <!-- 自定义编辑器工具栏 -->
    <div id="toolbar">
      <span class="ql-formats">
        <select class="ql-font"></select>
        <select class="ql-size"></select>
      </span>
      <span class="ql-formats">
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button class="ql-strike"></button>
      </span>
      <span class="ql-formats">
        <select class="ql-color"></select>
        <select class="ql-background"></select>
      </span>
      <span class="ql-formats">
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
      </span>
      <span class="ql-formats">
        <button class="ql-header" value="1"></button>
        <button class="ql-header" value="2"></button>
        <button class="ql-blockquote"></button>
        <button class="ql-code-block"></button>
      </span>
      <span class="ql-formats">
        <button class="ql-list" value="ordered"></button>
        <button class="ql-list" value="bullet"></button>
        <button class="ql-indent" value="-1"></button>
        <button class="ql-indent" value="+1"></button>
      </span>
      <span class="ql-formats">
        <button class="ql-direction" value="rtl"></button>
        <select class="ql-align"></select>
      </span>
      <span class="ql-formats">
        <button class="ql-link"></button>
        <button class="ql-image"></button>
        <button class="ql-video"></button>
        <button class="ql-formula"></button>
      </span>
      <span class="ql-formats">
        <button class="ql-clean"></button>
      </span>
    </div>
    <!-- 创建编辑容器 -->
    <div id="editor">
      <pre>

        var a = 10;
        // optionally configure hljs
        hljs.configure({  
          languages: ['javascript', 'ruby', 'python']
       });
        var editor = new Quill("#editor", {
          theme: "snow",
          modules: { 
            toolbar: "#toolbar",
            syntax: {
              highlight: text => hljs.highlightAuto(text).value
            }
          }
        });  
      </pre>
    
    </div>
    <!-- 引入js文件 -->
    <script src="./quill.js"></script>
    <!-- 初始化编辑器，snow主题 -->
    <script>
    
      hljs.configure({   // optionally configure hljs
        languages: ['javascript']
     });
      var editor = new Quill("#editor", {
        theme: "snow",
        modules: { toolbar: "#toolbar",syntax: {
          highlight: text => hljs.highlightAuto(text).value
        }}
      });

   
    </script>
  </body>
</html>
